<template>
  <div class="app-container banner_page">
    <div style="padding: 10px;background: #fff;">
      <el-row style="background: #fff;">
        <el-col :span="22">
          <el-button type="primary" @click="showDialog('')">新增</el-button>
          <el-button @click="opSeriesStatus(1)">上架</el-button>
          <el-button @click="opSeriesStatus(2)">下架</el-button>
          <el-button @click="delSeries">删除</el-button>
        </el-col>
        <el-col :span="2">
          <div class="total_bar" v-if="count">
            <span>共{{ count }}条</span>
          </div>
        </el-col>

      </el-row>
      <el-table
        ref="multipleTable"
        stripe
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
        />
        <el-table-column
          prop="title"
          label="系列标题"
        />
        <el-table-column
          label="封面"
          width="80"
        >
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              trigger="hover"
            >
              <img class="pre_tab_img" :src="scope.row.img" alt="">
              <span slot="reference"><img class="tab_img" :src="scope.row.img" alt=""></span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="80"
        >
          <template slot-scope="scope">{{ [ '待处理', '上架', '下架' ][+scope.row.status] }}</template>
        </el-table-column>
        <!-- <el-table-column
          prop="status"
          label="销量"
          width="80"
        />
        <el-table-column
          prop="sorttime"
          label="关联商品"
          show-overflow-tooltip
        />
        <el-table-column
          prop="updatetime"
          label="补款率"
          show-overflow-tooltip
        />
        <el-table-column
          prop="commodityid"
          label="售后"
          show-overflow-tooltip
        /> -->
        <el-table-column
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDialog(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;align-items: center;justify-content: center;padding: 20px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="20"
          :page-count="total"
          @current-change="getData"
        />
      </div>
    </div>

    <el-dialog :title="editdata?'编辑':'新增'" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="所属品牌" label-width="80px">
          <el-input v-model="pinpai" readonly placeholder="kamisoul" autocomplete="off" />
        </el-form-item>
        <el-form-item label="系列标题" label-width="80px">
          <el-input v-model="title" autocomplete="off" />
        </el-form-item>
        <div>
          <div class="" style="margin-bottom: 10px;">
            <el-form-item label="LOGO" label-width="80px">
              <span style="color: #ccc;">720X720PX的图像最佳，大小请不要超过3M</span>
            </el-form-item>
          </div>
          <div style="display: flex;">
            <el-upload
              class="avatar-uploader"
              accept="image/png,image/jpeg,image/gif"
              action="#"
              :show-file-list="false"
              :on-change="beforeAvatarUpload"
              :auto-upload="false"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>

          </div>

        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveseries">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { seriesIdx, seriesAdd, seriesEdit, opSeriesStatus, delSeries } from '@/api/series'
export default {
  components: {

  },
  data() {
    return {
      dialogFormVisible: false,
      tableData: [],
      multipleSelection: [],

      total: 1,
      count: 1,

      editdata: '',
      pinpai: '',
      title: '',
      imageUrl: '',
      imgFile: '',
      brandid: '1'
    }
  },
  created() {
    this.getData(1)
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file)
      this.imgFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },

    showDialog(data) {
      this.dialogFormVisible = true
      data ? this.editdata = data : this.editdata = ''
      data ? this.title = data.title : this.title = ''
      data ? this.imageUrl = data.img : this.imageUrl = ''
    },
    getData(page) {
      seriesIdx({ frames: 1, page: page }).then(res => {
        this.tableData = res.detail.data.list
        this.count = res.detail.data.count;
        this.total = res.detail.data.total
      })
    },
    opSeriesStatus(status) {
      if(this.multipleSelection.length === 0) {
        this.$message.warning('请选择系列数据')
        return
      }
      const self = this
      const seriesid = []
      self.multipleSelection.forEach(row => {
        seriesid.push(row.seriesid)
      })

      opSeriesStatus({
        seriesid: seriesid.toString(),
        status: status
      }).then(response => {
        self.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$refs.multipleTable.clearSelection()
        self.tableData.forEach(row => {
          seriesid.forEach(id => {
            row.seriesid == id ? row.status = status + '' : row.status
          })
        })
      })
    },
    delSeries() {
      const self = this
      if(this.multipleSelection.length === 0) {
        this.$message.warning('请选择系列数据')
        return
      }
      this.$confirm('此操作将删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const seriesid = []
        self.multipleSelection.forEach(row => {
          	seriesid.push(row.seriesid)
        })
        delSeries({
          		seriesid: seriesid.toString()
          	}).then(response => {
          	self.$message({
          		message: '操作成功',
          		type: 'success'
          	})
          	this.$refs.multipleTable.clearSelection()
          seriesid.forEach(id => {
            self.tableData = self.tableData.filter(function(row) {
              return row.seriesid != id
            })
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    saveseries() {
      if (this.editdata) {
        this.seriesEdit()
      } else {
        this.seriesAdd()
      }
    },
    checkParams() {
      if(!this.title) {
        this.$message.error('请填写系列标题')
        return false
      } else if(!this.imgFile) {
        this.$message.error('请上传系列图片')
        return false
      } else {
        return true
      }
    },
    seriesAdd() {
      if(!this.checkParams()) return
      seriesAdd({
        title: this.title,
        brandid: this.brandid,
        frames: 1,
        files: this.imgFile
      }).then(res => {
        this.dialogFormVisible = false
        this.imageUrl = ''
        this.imgFile = ''
        this.title = ''
        this.getData(1)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    },
    seriesEdit() {
      if(!this.checkParams()) return
      seriesEdit({
        title: this.title,
        brandid: this.brandid,
        frames: 1,
        seriesid: this.editdata.seriesid,
        files: this.imgFile
      }).then(res => {
        this.editdata = ''
        this.imageUrl = ''
        this.imgFile = ''
        this.title = ''
        this.dialogFormVisible = false
        this.getData(1)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      })
    }

  }
}
</script>
<style>

</style>
<style lang="less" scoped>
		.avatar-uploader .avatar-uploader-icon{
			width: 100px;
			height: 100px;
			line-height: 100px;
		}

		.avatar {
	    width: 100px;
	    height: 100px;
	    display: block;
	  }
.pre_tab_img{
	width: 100px;height: 100px;
}
.banner_page{
	position: relative;

}
.total_bar{
		height: 40px;
		line-height: 40px;
	}
	.tab_img{
		width: 20px;
		height: 20px;
	}

</style>

